<template>
  <view>
    <u-popup :show="show" mode="center"  @close="closeHandle" bgColor="transparent">
    	<view class="offical-account-modal">
        
        <view class="main-block" :style="{backgroundImage:'url('+bg+')'}">
          <view class="text-main">
            <view class="num">{{discountNum}}</view>
            <view class="tip">折</view>
          </view>
          <view class="tip-text">
            全场测评通用券
          </view>
          
          <view class="count-time">
            优惠时限：<u-count-down @finish="finishCountHandle" :time="countdownMillis" format="HH:mm:ss"></u-count-down>
          </view>
          <!-- {{discountValidHour}} -->
          
          <view class="btn-wrapper" @click="confirmHandle">
            <!-- 按钮 - 去使用 -->
            <image :src="btnImg" mode=""></image>
          </view>
        </view>
        <view class="close-icon" @click="closeHandle">
          <u-icon name="close-circle" color="rgba(255,255,255,.7)" size="36"></u-icon>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    // name:"offical-account-modal",
    
    props:{
      visible:{
        type:Boolean,
        default:false
      },
      discountNum:{
        type:Number,
        default:6
      },
      discountValidHour:{
        type:Number,
        default:72
      }
    },
    watch:{
      visible:{
        handler(val){
          this.show = val
        },
        immediate:true
      },
      discountValidHour:{
        handler(val){
          this.countdownMillis = val * 60 * 60 * 1000
        },
        immediate:true,
      }
    },
    data() {
      return {
        show:false,
        bg:this.imgBaseURL+'/scl/offical-account-gift-modal-bg.png',
        btnImg:this.imgBaseURL+'/scl/offical-account-gift-modal-btn.png',
        countdownMillis:0,
      };
    },  
    methods:{
      finishCountHandle(){
        
      },
      confirmHandle(){
        this.show = false
        this.$emit('confirm')
      },
      closeHandle(){
        this.show = false 
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.count-time .u-count-down .u-count-down__text{
    // 这里不生效，去调用这个组件的父页面看！！
  }


  .offical-account-modal{
    height: 646rpx;
    // background-color: #fff;
    border-radius: 24rpx;
    // box-sizing: border-box;
    padding-bottom: 200rpx;
    .main-block{
      // width: 600rpx;
      // height: 340rpx;
      width: 690rpx;
      height: 794rpx;
      box-sizing: border-box;
      // padding-top: 194rpx;
      padding-top: 294rpx;
      flex-direction: column;
      align-items: center;
      display: flex;
      // justify-content: center;
      // background: url('@/static/images/modal/modal-bg-1.png');
      background-size: 100% 100%;
      
      .num{
        font-family: Helvetica, Helvetica;
        font-weight: bold;
        font-size: 120rpx;
        color: #F77937;
        line-height: 120rpx;
        text-align: left;
        font-style: normal;
      }
      .text-main{
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-size: 40rpx;
        color: #F77937;
        line-height: 60rpx;
        font-style: normal;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        
        .tip{
          padding-bottom: 12rpx;
          padding-left: 10rpx;
          font-weight: bold;
        }
      }
      .tip-text{
        // margin-top: 16rpx;
        
        border-radius: 24rpx;
        border: 2rpx solid #BF471C;
        height: 54rpx;
        line-height: 54rpx;
        padding: 0 18rpx;
        
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #BF471C;
        text-align: justify;
        font-style: normal;
      }

      .count-time{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
        margin-top: 30rpx;
        display: flex;
      }
      
      .btn-wrapper{
        margin-top: 104rpx;
        
        width: 354rpx;
        height: 130rpx;
        
        image{
          width: 100%;
          height: 100%;
        }
      }
    }
    
    .close-icon{
          display: flex;
          justify-content: center;
          margin-top: 40rpx;
    }
  }
</style>